/**
 * @file DesignLayout.tsx
 * @description 设计页面的布局组件，包含顶部导航栏、侧边菜单栏和内容区域
 * @author [项目作者]
 */

import React from "react";
import { Layout, Menu, Button } from "antd";
import type { MenuProps } from "antd";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { designRoutes } from "../../router";
import { BellFilled } from "@ant-design/icons";
import logo from "./assets/images/logo.png";
import avatar from "./assets/images/avatar.png";
import styles from "./DesignLayout.module.css";

// 从 Layout 组件中解构出需要的子组件
const { Header, Sider, Content } = Layout;

/**
 * @component UserLayout
 * @description 设计页面的主布局组件，包含页面的整体结构和导航功能
 * @returns {JSX.Element} 返回设计页面的布局结构
 */
const UserLayout: React.FC = () => {
  // 用于页面导航的 hook
  const navigate = useNavigate();
  // 获取当前路由位置信息
  const location = useLocation();

  // 将路由配置分成顶部和底部两组
  const topRoutes = designRoutes.slice(0, 3);    // 顶部菜单项（前3个路由）
  const bottomRoutes = designRoutes.slice(3);    // 底部菜单项（剩余路由）

  /**
   * 构建顶部菜单项配置
   * @type {MenuProps["items"]}
   */
  const topMenuItems: MenuProps["items"] = topRoutes.map((route) => ({
    key: `/design/${route.path}`,
    icon: route.icon,
    label: route.label,
  }));

  /**
   * 构建底部菜单项配置
   * @type {MenuProps["items"]}
   */
  const bottomMenuItems: MenuProps["items"] = bottomRoutes.map((route) => ({
    key: `/design/${route.path}`,
    icon: route.icon,
    label: route.label,
  }));

  /**
   * 合并所有菜单项，在中间添加"开始设计"分割线
   * @type {MenuProps["items"]}
   */
  const menuItems: MenuProps["items"] = [
    ...(topMenuItems || []),
    {
      type: "group",
      label: <div className={styles.designTip}>开始设计</div>,
    },
    ...(bottomMenuItems || []),
  ];

  return (
    <Layout className={styles.layout}>
      {/* 页面顶部导航栏 */}
      <Header className={styles.header}>
        <div className={styles.headerLeft}>
          <img src={logo} alt="logo" className={styles.logo} />
        </div>

        {/* 顶部导航栏右侧功能区 */}
        <div className={styles.headerRight}>
          <Button type="primary" ghost className={styles.trialButton}>
            立即体验
          </Button>
          <Button type="primary" className={styles.vipButton}>
            个人商用VIP
          </Button>
          <BellFilled className={styles.notificationIcon} />
          <img src={avatar} alt="avatar" className={styles.avatar} />
        </div>
      </Header>

      <Layout>
        {/* 左侧菜单栏 */}
        <Sider className={styles.sider}>
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            className={styles.menu}
            items={menuItems}
            onClick={({ key }) => navigate(key)}
          />
        </Sider>
        {/* 主内容区域 */}
        <Layout>
          <Content className={styles.content}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default UserLayout;
